<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="flex.css">
    <title>Document</title>
</head>

<body>
    <div class="flex justify-content-center">
        <div class="container flex column ">
            <!-- 第一行 -->
            <div class="line row justify-content-start">
                <div class="panel start">
                    <div class="point"></div>
                </div>
                <div class="panel cneter">
                    <div class="point"></div>
                </div>
                <div class="panel end">
                    <div class="point"></div>
                </div>
                <div class="panel column-center">
                    <div class="point"></div>
                </div>
                <div class="panel center-center">
                    <div class="point"></div>
                </div>
                <div class="panel cneter-end">
                    <div class="point"></div>
                </div>
                <div class="panel end-end">
                    <div class="point"></div>
                </div>
            </div>
            <!-- 第二行 -->
            <div class="line row justify-content-start">
                <div class="panel row-btw">
                    <div class="point"></div>
                    <div class="point"></div>
                </div>
                <div class="panel clo-btw">
                    <div class="point"></div>
                    <div class="point"></div>
                </div>
                <div class="panel clo-btn-row-cen">
                    <div class="point"></div>
                    <div class="point"></div>
                </div>
                <div class="panel column-center">
                    <div class="point"></div>
                    <div class="point"></div>
                </div>
                <div class="panel flex column justify-content-between">
                    <div class="point"></div>
                    <div class="point align-self-center"></div>
                    <div class="point align-self-end" style="visibility: hidden;"></div>
                </div>


                <!-- 2,5 -->
                <!-- <div class="panel flex column justify-content-between">
                    <div>
                        <div class="point"></div>
                    </div>
                    <div class="flex column justify-content-between">
                        <div class="point align-self-center"></div>
                    </div>

                </div> -->

                <div class="panel flex column justify-content-between">
                    <div class="point"></div>
                    <div class="point align-self-end"></div>
                </div>
            </div>
            <!-- line-three -->
            <div class="line row justify-content-start">
                <div class="panel row-btw">
                    <div class="point"></div>
                    <div class="point"></div>
                    <div class="point"></div>
                </div>
                <div class="panel clo-btw">
                    <div class="point"></div>
                    <div class="point"></div>
                    <div class="point"></div>
                </div>
                <div class="panel flex column justify-content-between">
                    <div class="point"></div>
                    <div class="point align-self-center"></div>
                    <div class="point align-self-end"></div>
                </div>
                <div class="panel flex justify-content-between column">
                    <div class="flex justify-content-between">
                        <div class="point"></div>
                        <div class="point"></div>
                    </div>
                    <div class="flex justify-content-between">
                        <div class="point"></div>
                        <div class="point"></div>
                    </div>
                </div>
                <div class="panel flex column justify-content-between">
                    <div class="point align-self-center"></div>
                    <div class="flex justify-content-between">
                        <div class="point"></div>
                        <div class="point"></div>
                    </div>
                    <div class="point align-self-center"></div>
                </div>
            </div>
            <div class="line row justify-content-start">
                <!-- one -->
                <div class="panel flex justify-content-between column">
                    <div class="flex justify-content-between">
                        <div class="point"></div>
                        <div class="point"></div>
                        <div class="point"></div>
                    </div>

                    <div class="flex justify-content-between">
                        <div class="point"></div>
                        <div class="point"></div>
                    </div>
                </div>

                <div class="panel flex justify-content-between point-row">
                    <div class="flex justify-content-between column">
                        <div class="point"></div>
                        <div class="point"></div>
                    </div>
                    <div class="flex justify-content-between column">
                        <div class="point"></div>
                        <div class="point"></div>
                        <div class="point"></div>
                    </div>
                </div>
                <!-- 4,3 -->
                <!-- <div class="panel flex column justify-content-between">
                    <div class="point-row flex">
                        <div class="point align-self-center"></div>
                        <div class="point"></div>
                    </div>
                    <div class="point align-self-center"></div>
                    <div class="point align-self-end"></div>

                </div> -->

                <div class="panel flex justify-content-between point-row">
                    <div class="point"></div>
                    <div class="flex justify-content-between column">
                        <div class="point"></div>
                        <div class="point"></div>
                        <div class="point" style="visibility: hidden;"></div>



                    </div>
                    <div class="point align-self-end"></div>

                </div>


                <div class="panel flex justify-content-between column">
                    <div class="flex justify-content-between">
                        <div class="point"></div>
                        <div class="point"></div>
                    </div>
                    <div class="point align-self-center"></div>
                    <div class="flex justify-content-between">
                        <div class="point"></div>
                        <div class="point"></div>
                    </div>
                </div>

                <!-- line-five -->




            </div>
            <div class="line row justify-content-start">
                <div class="panel flex justify-content-between column">
                    <div class="flex justify-content-between">
                        <div class="point"></div>
                        <div class="point"></div>
                        <div class="point"></div>
                    </div>

                    <div class="flex justify-content-between">
                        <div class="point"></div>
                        <div class="point"></div>
                        <div class="point"></div>

                    </div>
                </div>

                <div class="panel flex justify-content-between point-row">
                    <div class="flex justify-content-between column">
                        <div class="point"></div>
                        <div class="point"></div>
                        <div class="point"></div>
                    </div>

                    <div class="flex justify-content-between column">
                        <div class="point"></div>
                        <div class="point"></div>
                        <div class="point"></div>

                    </div>
                </div>

                <div class="panel flex justify-content-between column">
                    <div class="flex justify-content-between">
                        <div class="point"></div>
                        <div class="point"></div>
                        <div class="point"></div>
                    </div>

                    <div class="flex justify-content-between">
                        <div class="point"></div>
                        <div class="point"></div>
                        <div class="point"></div>

                    </div>
                    <div class="flex justify-content-between">
                        <div class="point"></div>
                        <div class="point"></div>
                        <div class="point"></div>

                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>